<!DOCTYPE HTML>
<html>
<!-- 订单池 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title style="background-color: #00c6a7;">订单详情</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/ali-icon/iconfont.css" />
    <style media="screen">
        .card {
            width: 95%;
            border-radius: 6px;
            padding: 0px 10px;
            margin: 10px auto;
            box-shadow: 0px 0px 10px #E5E5E5;
            overflow: hidden;
        }

        .goods-title {
            margin-left: 5px;
        }

        .goods-title span {
            margin-right: 10px;
        }

        .aui-list .aui-list-item-inner {
            padding-right: 0px;
        }

        .aui-list .aui-list-item-inner .aui-list-item-title {
            color: #757575 !important;
        }

        .aui-list .aui-list-item-inner .aui-list-item-right {
            font-size: 16px;
            max-width: 100%;
            color: #000 !important;
        }
    </style>
</head>

<body style="background-color: white">
    <div id="app">
        <div class="aui-bar aui-bar-btn aui-bar-btn-full">
            <div class="aui-bar-btn-item" onclick="change_menu(0)">未接订单</div>
            <div class="aui-bar-btn-item aui-active">已接订单</div>
            <div class="aui-bar-btn-item" onclick="change_menu(4)">已完成订单</div>
        </div>
        <div v-show="list.length == 0" align="center" style="padding-top: 30%">
            <img src="../image/noorder.png" width="50%" />
            <p>&nbsp;</p>
            <p><div class="aui-btn aui-btn-success aui-btn-block" style="width: 50%;" @click="getAcceptedOrderList">点击刷新</div></p>
        </div>
        <section class="aui-content aui-grid aui-margin-b-15 card" v-for="(vo, index) in list">
            <div class="aui-card-list" style="margin-bottom: 0">
                <div class="aui-card-list-header aui-card-list-user" style="padding: 10px 5px">
                    <div class="aui-card-list-user-avatar" style="width: 20px; margin-top: 2px"> <img style="width: 100%" src="../image/rmb.png"> </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-font-size-16">付款金额 <i class="aui-iconfont  aui-font-size-12"></i></div>
                        <small class="aui-font-size-16" style="color: #00C6A7">￥{{vo.due}}</small>
                    </div>
                </div>
                <div class="aui-card-list-content" style="padding: 0px 5px 0px 5px">
                    <ul class="aui-list aui-list-noborder">
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner aui-border-t">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>订单号</div>
                                <div class="aui-list-item-right">{{vo.sn}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="color:#ffc107;font-size: 0.2rem;">● </span>状态</div>
                                <div class="aui-list-item-right" style="color:#ffc107 !important;">{{vo.statusName}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>车牌</div>
                                <div class="aui-list-item-right">{{vo.plateNum}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>车主电话</div>
                                <div class="aui-list-item-right">{{vo.phoneNum}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>服务类型</div>
                                <div class="aui-list-item-right">{{vo.orderItems[0].goodsName}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>服务网点</div>
                                <div class="aui-list-item-right">{{vo.shop.name}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>服务地址</div>
                                <div class="aui-list-item-right">{{vo.shop.address}}</div>
                            </div>
                        </div>
                        <div class="aui-padded-l-0">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-title aui-font-size-14 goods-title"><span style="font-size: 0.2rem;">● </span>预约时间</div>
                                <div class="aui-list-item-right">{{vo.appointmentTime}}</div>
                            </div>
                        </div>
                    </ul>
                </div>
                <div class="aui-card-list-footer aui-border-t" v-if="vo.status == 6">
                    <section class="aui-grid aui-margin-b-15">
                        <div class="aui-row">
                            <div class="aui-col-xs-3">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="openMap(vo.coordinate,vo.shop.address)">查看地图</div>
                            </div>
                            <div class="aui-col-xs-3">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="call(vo.phoneNum)">联系客户</div>
                            </div>
                            <div class="aui-col-xs-3">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="openDialog(vo)">撤销订单</div>
                            </div>
                            <div class="aui-col-xs-3">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="startWach(vo)">开始洗车</div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="aui-card-list-footer aui-border-t" v-if="vo.status == 3">
                    <section class="aui-grid aui-margin-b-15">
                        <div class="aui-row">
                            <div class="aui-col-xs-4">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="call(vo.phoneNum)">联系客户</div>
                            </div>
                            <div class="aui-col-xs-4">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="openDialog(vo)">撤销订单</div>
                            </div>
                            <div class="aui-col-xs-4">
                                <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" @click="endWach(vo)">洗车结束</div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common/api.js"></script>
<script type="text/javascript" src="../script/common/vue.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/my/order.js"></script>
<script type="text/javascript">
    apiready = function() {
        //显示加载缓冲页面
        api.showProgress({
        });
        order.getAcceptedOrderList(); //初始化
        api.parseTapmode();

        api.addEventListener({
            name: 'orderaccept'
        }, function(ret, err) {
            window.location.reload();
        });
    }

    change_menu = function(index) {
        if (index == 0) {
            order.hasLogin(function() {
              order.hasAcceptedOrderList(function() {
                api.setFrameGroupIndex({
                    name: 'IndexGroup',
                    index: index,
                    reload: true
                });
              });
            });
        } else {
            api.setFrameGroupIndex({
                name: 'IndexGroup',
                index: index,
                reload: true
            });
        }
    }

    function openWin(name) {
      $api.openWin(name);
    }

</script>

</html>
